<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
<!-- 		<view class="user-wallet-card m-md p-md section-bg radius-10">
			<view class="flex-between">
				<view class="flex flex-column">
					<text class="text-xs text-secondary">当前账户（金币）</text>
					<text class="number m-t-sm" style="font-size: 50rpx;color: var(--main-color-2);">{{ userInfo.money }}</text>
				</view>
				<view class="user-wallet-card_action rel radius-15 flex-center" @click="">
					<text class="text-xs">{{$t('withdrawal.walletcard-btn')}}</text>
				</view>
			</view>
		</view> -->
		
		<m-walletcard 
			:num="userInfo.money" 
			type="money"
			:rightBT="$t('withdrawal.walletcard-btn')" 
			rightBP="/pages/withdrawal/withdrawal_log"
		>
		</m-walletcard>
		<view class="conter">
			<view class="form-item">
				<view class="input-inline">
					<u--input
						type="number"
						:placeholder="$util.handleStr($t('withdrawal.input-placeholder'),configInfo.money_company)"
						maxlength="9"
						v-model="money"
						clearable
						border="none"
						fontSize="25px"
						class="number"
						@change="changeMoney"
					>
					</u--input>
				</view>
			</view>
			<view class="estimate-money text-xs">
				<view class="flex-start">
					{{$t('withdrawal.estimate-money-tips')}}<u--text type="success" mode="price" :text="estimateMoney" class="number"></u--text>
					<text class="text-xs">（1{{ configInfo.money_company }}={{ configInfo.with_money_proportion }}元）</text>
				</view>
			</view>
			<view class="estimate-money text-xs" v-if="this.userInfo.level_info && this.userInfo.level_info.with_fee > 0">
				<view class="item">{{$t('withdrawal.estimate-fee-tips')}}<text class="text-danger number text-sm">{{ serviceFee }}</text>{{ configInfo.money_company }}</view>
			</view>
		</view>
		<view class="conter">
			<view class="with-modes">
				<view class="flex-between">
					<text>{{$t('withdrawal.mode-title')}}</text>
					<view class="option-list" v-if="withType[configInfo.with_mode]">
						<u-radio-group >
							<u-radio shape="circle" :activeColor="withType[configInfo.with_mode]['activeColor']" :label="withType[configInfo.with_mode]['text']" :checked="true"></u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
			<view class="m-t-md">
				<m-button shape="circle" :text="$t('withdrawal.submit-btn')" :loading="loading"  @submit="submit"></m-button>
				<!-- <u-button :text="$t('withdrawal.submit-btn')" :color="configInfo.mainColor" :disabled="loading" :loading="loading" size="large" loadingText=" "  @click="submit"></u-button> -->
			</view>
		</view>
		<view class="conter">
			<view class="tips-text">
				<view class="item flex-start">
					<view v-if="configInfo.with_minnum > 0">{{$t('withdrawal.limit-min-money')}}<text class="text-danger">{{configInfo.with_minnum}}</text>{{configInfo.money_company}}，</view>
					<view v-if="configInfo.with_maxnum > 0">{{$t('withdrawal.limit-max-money')}}<text class="text-danger">{{configInfo.with_maxnum}}</text>{{configInfo.money_company}}</view>
				</view>
				<view class="item text-danger" @click="vipModel = true">{{$t('withdrawal.reduce-fee-tips')}}？</view>
				<u-parse :content="$util.handleStr($t('withdrawal.estimate-time-tips'),configInfo.with_timer)"></u-parse>
			</view>
		</view>

		<m-modal
			:show="vipModel"
			:title="$t('withdrawal.vip-modal-title')"
			:btn="$t('withdrawal.vip-modal-btn')"
			@btnComplete="$util.go('vip/vip',{'login':true})"
			@close="vipModel = false"
		>
		<view class="slot-content text-sm p-md">
			<view class="slot-content_item">
				<text>{{$t('withdrawal.fee-content-1')}}</text>
			</view>
			<view class="slot-content_item">
				<text class="text-xs text-secondary">{{$t('withdrawal.fee-content-2')}}</text>
			</view>
		</view>
		</m-modal>
		
		<!-- 信息未完善模态 -->
		<m-modal
			:show="infoModalShow"
			:title="$t('withdrawal.modal-title')"
			:btn="$t('withdrawal.modal-btn')"
			@btnComplete="$util.go('my/my_info',{'login':true})"
			@close="infoModalShow = false"
		>
		<view class="slot-content text-sm p-t-md p-b-md">
			<view class="slot-content_item text-center">
				{{$t('withdrawal.modal-content')}}
			</view>
		</view>
		</m-modal>
		
		<u-action-sheet
			:show="bindPhoneShow"
			:round="10"
			:title="$t('withdrawal.bindphone-modal-title')"
			@close="bindPhoneShow = false"
		>
			<view class="conter">
				<text class="text-danger">{{$t('withdrawal.bindphone-modal-content')}}</text>
				<view style="width: 150px;margin: 0 auto;margin-top: 10px;">
					<u-button style="color: var(--mainbackcolor)!important;" color="var(--main-color-1)" :text="$t('withdrawal.bindphone-modal-btn')" shape="circle" @click="$util.go('my/my_info',{'login':true})"></u-button>
				</view>
			</view>
		</u-action-sheet>
		
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	// import {User} from '../../model/user.js'
	export default {
		data() {
			return {
				loading:false,
				estimateMoney:'0.00',
				serviceFee:'0.00',
				money:'',
				withInfoModal:false,
				vipModel:false,
				withType : {
					1:{'activeColor':'#dd524d','text':this.$t('withdrawal.mode-code')},
					2:{'activeColor':'#1378fe','text':this.$t('withdrawal.mode-alipay')},
					3:{'activeColor':'#36b368','text':this.$t('withdrawal.mode-wxpay')},
					4:{'activeColor':'#36b368','text':'银行卡'},
				},
				bindPhoneShow:false,
				infoModalShow:false,
				scrollTop:0
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),
		onLoad(option){
		},
		onReady(){
			if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		async onShow(){
			// this.withInfoModal = true
		},
		onHide(){
			uni.hideLoading();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			...mapActions(['getUserInfo']),

			// 发起提现
			async submit(){
				let thos = this
				thos.loading = true;
				let res = await thos.$api.user.submiWith({money:thos.money})
				if(res.code == 200){
					thos.$util.showToast(res.msg,function(){
						thos.getUserInfo()
						setTimeout(async() => {
							thos.$util.go('withdrawal/withdrawal_detail?id='+res.data,{'login':true})
						}, 1000)
					})
				}
				if(res.code == 2003 || res.code == 2004 || res.code == 2005 || res.code == 2006){
					thos.infoModalShow = true;
				}
				if(res.code == 2001){
					thos.bindPhoneShow = true;
				}
				thos.loading = false;
			},

			changeMoney(value){
				// 计算预估到账金额
				if(!this.configInfo.with_money_proportion)return
				var money_proportion = this.configInfo.with_money_proportion;
				if(money_proportion){
					this.estimateMoney = (value * money_proportion).toFixed(2);
				}
				// 计算服务费
				var with_fee = this.userInfo.level_info.with_fee / 100; // 服务费百分比
				this.serviceFee = (value * with_fee).toFixed(2);
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: var(--theme-page-bg);
	}
	.m-walletcard{
		margin: 15px 30rpx;
	}
	.conter{
		padding: 5px 10px;
	}
	.with-modes{
		color: $incolor-1;
		font-size: $titleSize;
		margin-bottom: 10px;
	}
	.tips-text{
		.item{
			margin-bottom: 10px;
		}
	}
	.form-item{
		margin-top:20px;
	}
	.estimate-money{
		color: $incolor-2;
		margin-top: 10px;
	}
	.u-text{
		flex: none;
		width: auto;
	}
	.user-wallet-card{
		&_action{
			background-color: var(--main-color-1);
			width: 180rpx;
			// margin-right: -40rpx;
			height: 55rpx;
			// border-bottom-right-radius: 0;
		}
		// &_action::after{
		// 	position: absolute;
		// 	content: '';
		// 	// width: 15rpx;
		// 	// height: 15rpx;
		// 	// background-color: #000;
		// 	bottom: -13rpx;
		// 	right: 0;
		// 	// border-top: 15rpx solid transparent;
		// 	border-bottom: 15rpx solid transparent;
		// 	border-left: 10rpx solid var(--main-color-1);
		// 	border-right: 0 solid var(--main-color-1);
		// }
	}
</style>
